<template>
  <div>
    <van-search
      :value="searchValue"  
      show-action
      placeholder="输入多标签时请用空格隔开"
      @search="onSearch"
      
      @change="onChange"
    />

    <!-- <van-divider contentPosition="left"> 搜索历史
        <van-icon name="down" />
       </van-divider> -->
    <!-- <div class="search-tips">
      <span>搜索历史</span>
      <van-icon name="delete" size="16px" color="#969799" />
    </div>
    <div class="tag tag-temp-text" v-if="historySearch.length === 0">
      无搜索历史
    </div>
    <div class="tag" v-else>
      <van-tag
        class="space-8"
        v-for="(item, i) in historySearch"
        :key="i"
        closeable
        round
        size="large"
        type="primary"
        color="#f8f8f8"
        text-color="#656565"
        @close="close(item)"
      >
        {{ item }}
      </van-tag>
    </div>
    <div class="search-tips">
      <span>推荐搜索</span>
      <van-icon name="replay" size="16px" color="#969799" />
    </div>

    <div class="tag">
      <van-tag
        class="space-8"
        v-for="(item, i) in recommendSearch"
        :key="i"
        round
        size="large"
        type="primary"
        color="#f8f8f8"
        text-color="#656565"
      >
        {{ item }}
      </van-tag>
    </div> -->

    <div style="padding: 12px">
      <van-button round block type="info" @click="toPage()">
        搜索用户
      </van-button>
    </div>
  </div>
  <van-notify id="van-notify" />
</template>

<script setup>
import { ref } from 'vue'
import {searchByTag} from '../../api/user/userApi'
import useStore from '../../store';
import { onShow } from '@dcloudio/uni-app';
// https://pter-img.oss-cn-hangzhou.aliyuncs.com/2024/01/11/d8a0e624f6334b46bb76daf3aa116a53peter.jpg
const searchValue = ref('')
const tagList=ref([])
const activetags = ref([])
const activeIndex = ref(0)
const historySearch = ref([
  '搜索文本一',
  '搜索文二',
  '搜索文本三',
  '搜索文本四',
  '搜索文本五',
  '搜索文本六',
  '搜索文本七',
  '搜索文本八',
]) //历史搜索
const recommendSearch = ref([
  '推荐搜索文本一',
  '推荐搜索文二',
  '推荐搜索文本三',
  '推荐搜索文本四',
  '推荐搜索文本五',
  '推荐搜索文本六',
  '推荐搜索文本七',
  '推荐搜索文本八',
]) //推荐搜索

const show = ref(true)
const close = (item) => {
  console.log(item)
  const index = historySearch.value.indexOf(item)
  historySearch.value.splice(index, 1)
}
const toPage = () => {
  if(tagList.value.length<=0){
    return uni.showToast({
      title:'搜索内容不能为空',
      icon:'none'
    })
  }
  console.log(tagList.value);
  console.log(searchValue.value);
  
   tagList.value=tagList.value.split(" ")
  useStore().user().set_tagList(tagList.value)
  uni.navigateTo({ url: '/pagePerson/user/searchResultPage?tagList='+JSON.stringify(tagList.value) })
}
//搜索
const onSearch =async (val) => {
  const res=await searchByTag(tagList.value)
}
const onCancel = () => {
  tagList.value = originalTagList
}

const onClickItem = (detail) => {
  console.log(detail)

  const index = activetags.value.indexOf(detail.detail.id)
  if (index > -1) {
    activetags.value.splice(index, 1)
  } else {
    activetags.value.push(detail.detail.id)
  }
}
const onChange=(e)=>{
  console.log(e.detail);
  tagList.value=e.detail

  
}
onShow(()=>{
  console.log(useStore().user().tagList);
  
  tagList.value=useStore().user().tagList.toString()
})

</script>
<style scoped>
.tag {
  padding-left: 16px;
}
.tag-temp-text {
  font-size: 14px;
  color: #c1c1c1;
}
.space-8 {
  margin-left: 8px;
}
/deep/.van-tag {
  margin-bottom: 8px;
}
.search-tips {
  height: 30px;
  line-height: 30px;
  padding: 0 8px 0 16px;
  font-size: 14px;
  color: #969799;
  display: flex;
  justify-content: space-between;
}
</style>
